<template>
  <div class="Advertising">
    <div class="Advertising__content">
      <header class="Advertising__header">
        <div class="Advertising__header__right">
          <el-button type="primary" @click.native="getList(1)">搜索</el-button><br>
          <nuxt-link style="color: #409eff;padding:8px;" to='/advertising/add/0'>新增广告</nuxt-link>
        </div>
        <div class="Advertising__header__left">
          <div class="Advertising__header__group" style="margin-bottom:15px;">
            <div class="Advertising__header__item">
              <span class="Advertising__header__item__label">名称</span>
              <input class="Advertising__header__item__input" v-model="searchData.title" type="text" placeholder="单行输入">
            </div>
            <div class="Advertising__header__item" style="margin-left:20px;">
              <no-ssr>
                <el-cascader
                  @change="setAreaCode"
                  change-on-select size="mini"
                  clearable :options="regionData"  placeholder="省市区">
                </el-cascader>
              </no-ssr>
            </div>
            <div class="Advertising__header__item" style="margin-left:60px;">
              <el-date-picker
              style="width:128px;"
                size="mini"
                type="date"
                v-model="searchData.startTime"
                placeholder="选择日期">
              </el-date-picker>
              <span style="padding:0 10px;color: #999999;font-size:14px;">到</span>
              <el-date-picker
              style="width:128px;"
                size="mini"
                type="date"
                v-model="searchData.endTime"
                placeholder="选择日期">
              </el-date-picker>
            </div>
          </div>
          <div class="Advertising__header__group">
            <el-button
              @click.native="setSearchStatus('all')" :type="searchData.status=='all'?'primary':'text'">全部</el-button>
            <el-button
              @click.native="setSearchStatus('online')" :type="searchData.status=='online'?'primary':'text'">上线中</el-button>
            <el-button
              @click.native="setSearchStatus('finish')" :type="searchData.status=='finish'?'primary':'text'">已结束</el-button>
          </div>
        </div>
      </header>
      <div class="list__table">
        <el-table
          :height="getTableHeight"
          @sort-change="getSortList"
          :default-sort="{prop: 'createTime', order: 'ascending'}"
          header-row-class-name="list__table__header"
          row-class-name="list__table__row"
          :data="tableData">
          <el-table-column
           width="80"
            prop="id"
            label="ID">
          </el-table-column>
          <el-table-column
            width="100"
            prop="title"
            label=" 广告名称">
          </el-table-column>
          <el-table-column
            width="100"
            label=" 广告类型">
            <template slot-scope="scope">
              <span>{{scope.row.type | filtersType}}</span>
            </template>
          </el-table-column>
          <el-table-column
            width="100"
            label="是否有效">
            <template slot-scope="scope">
              <span>{{scope.row.valid?'有效':'无效'}}</span>
            </template>
          </el-table-column>
          <el-table-column
            width="120"
            label="省/市/区">
            <template slot-scope="scope">
              <span>{{`${scope.row.provinceName}${scope.row.cityName}${scope.row.districtName}`}}</span>
            </template>
          </el-table-column>
          <el-table-column
            width="110"
            sortable="custom"
            prop="startTime"
            label="起始时间">
          </el-table-column>
          <el-table-column
            width="110"
            sortable="custom"
            prop="endTime"
            label="结束时间">
          </el-table-column>
          <el-table-column
            width="110"
            sortable="custom"
            prop="createTime"
            label="创建时间">
          </el-table-column>
          <el-table-column
            width="100"
            sortable="custom"
            prop="countNumber"
            label="浏览量">
          </el-table-column>
          <el-table-column
            fixed="right"
            width="200"
            label="操作">
            <template slot-scope="scope">
              <el-button v-show="scope.row.valid" @click="setNoValidEcpAdvertisement(scope.row.id)" type="text">设为无效</el-button>
              <el-button v-show="!scope.row.valid" @click="setValidEcpAdvertisement(scope.row.id)" type="text">设为有效</el-button>
              <el-button type="text" @click="$router.push(`/advertising/add/${scope.row.id}`)">编辑</el-button>
              <el-button type="text" @click="deleteEcpAdvertisement(scope.row.id)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <div class="table__pagination">
          <el-pagination
            v-show="pageData.total>0"
            layout="prev, pager, next"
            @current-change="getList"
            :page-size="pageData.pageSize"
            :current-page="pageData.pageNum"
            :total="pageData.total">
          </el-pagination>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
if (process.browser) {
    var regionData = require('element-china-area-data').regionData
}
import {getEcpAdvertisementList, deleteEcpAdvertisement,setValidEcpAdvertisement, setNoValidEcpAdvertisement} from '~/api'
  export default {
    data() {
      return {
        regionData,
        searchData: {
          title:'',
          startTime:'',
          endTime:'',
          status:'all',
          provinceCode:'',
          cityCode:'',
          districtCode:'',
          sortField:'createTime',
          sortType:'asc',
          pageNum: 1,
          pageSize: 15
        }
      }
    },
    async asyncData ({app}) {
      try {
        const searchData = {title:'', startTime:'', endTime:'', status:'all', provinceCode:'', cityCode:'', districtCode:'', sortField: 'createTime', sortType:'asc', pageNum: 1, pageSize: 15}
        const res = await getEcpAdvertisementList(app, searchData)
        if (res.code != '0') return {tableData: [], pageData: {pageNum: 1, pageSize:15, total:0, totalNum: 1}, message: res.message}
        const {pageNum, pageSize, total, totalNum} = res.data.page
        return {tableData: res.data.page.list, pageData: {pageNum, pageSize, total, totalNum}}
      } catch (error) {
        console.error(`获取广告列表数据接口错误，错误信息：${error}`)
      }
    },
    mounted() {
      if (this.message&&this.tableData.length==0) {
        this.$alert(this.message, '提示', {type: 'error'})
      }
    },
    methods: {
      getSortList ({prop, order}) {
        const sortField = prop
        const sortType = order=='descending'?'desc':'asc'
        this.getList(1, {sortField, sortType})
      },
      setAreaCode([provinceCode,cityCode,districtCode]) {
        this.searchData.searchData = 1
        this.searchData.provinceCode = provinceCode || ''
        this.searchData.cityCode = cityCode || ''
        this.searchData.districtCode = districtCode || ''
      },
      setSearchStatus (status) {
        this.searchData.searchData = 1
        this.searchData.status = status
      },
      async getList(Num=1, sort=null) {
        let {searchData} = this
        if (Num) {
          searchData.pageNum = Num
        }
        if (sort) {
          searchData.sortField = sort.sortField
          searchData.sortType = sort.sortType
        }
        const res = await getEcpAdvertisementList(this, searchData)
        if (res.code != '0') return this.$alert(res.message, '提示', {type: 'error'})
        const {pageNum, pageSize, total, totalNum} = res.data.page
        this.tableData = res.data.page.list
        this.pageData = {pageNum, pageSize, total, totalNum}
      },
      async deleteEcpAdvertisement (id) {
        const res = await deleteEcpAdvertisement(this, id)
        if (res.code != '0') return this.$alert(res.message, '提示', {type: 'error'})
        this.$message.success('删除成功')
        if (this.tableData.length==1) {
          this.searchData.pageNum--
        }
        this.getList()
      },
      async setValidEcpAdvertisement (id) {
        const res = await setValidEcpAdvertisement(this, id)
        if (res.code != '0') return this.$alert(res.message, '提示', {type: 'error'})
        this.$message.success('操作成功')
        this.getList()
      },
      async setNoValidEcpAdvertisement (id) {
        const res = await setNoValidEcpAdvertisement(this, id)
        if (res.code != '0') return this.$alert(res.message, '提示', {type: 'error'})
        this.$message.success('操作成功')
        this.getList()
      }

    },
    computed: {
      getTableHeight() {
        return this.$store.state.innerHeight-177
      }
    },
    filters: {
      filtersStatus (status) {
        return {
          '1': '开始',
          '2': '暂停',
          '3': '结束',
          '4': '即将开始',
          '5': '等待'
        }[status]
      },
      filtersType (type) {
        return {
          'SHOP': '店铺',
          'GOODS': '商品'
        }[type]
      }
    }
  }
</script>

<style lang="scss" scoped>
.list__table {
  text-align: center;
  & /deep/ {
    .list__table__header {
      th {
        font-size: 16px;
        text-align: center;
        color: #409eff;
        padding: 25px 0;
        border-bottom: none;
        &+th {
          .cell {
            border-left: 1px solid #dbdbdb;
          }
        }
      }
    }
    .list__table__row {
      td {
        font-size: 16px;
        padding: 25px 0;
        border-bottom: none;
        color: #666666;
      }
      .el-button--text {
        font-size: 16px;
        padding: 0;
      }
    }
  }
}
.table__pagination {
  text-align: center;
  padding: 15px;
}
.Advertising {
  // padding: 26px 50px;
  min-height: 100%;
  background-color: #f5f9fe;
  &__content {
    background-color: #fff;
  }
  &__header {
    border-bottom: 1px solid #f2f2f2;
    height: 114px;
    color: #409eff;
    font-size: 16px;
    line-height: 18px;
    &__group {
      padding-left: 42px;
      position: relative;
      &::before{
        content: "";
        display: block;
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background-color: #84dba7;
        position: absolute;
        top: 50%;
        left: 18px;
        margin-top: -3px;
      }
    }
    &__item {
      line-height: 25px;
      display: inline-block;
      padding-top: 4px;
      padding-bottom: 4px;
      & /deep/ {
        .el-input__icon {
          line-height: 25px;
        }
        .el-input__inner, .el-input--suffix{
          height: 25px;
          line-height: 25px;
          background-color: #f0f5fb;
          border: none;
          border-radius: 8px;
        }
      }
      &__label {
        padding-right: 25px;
      }
      &__input {
        border: none;
        width: 128px;
        height: 25px;
        background-color: #f0f5fb;
        border-radius: 9px;
        padding-left: 15px;
        &:focus {
          outline: none;
        }
      }
    }
    &__left {
      padding: 15px 0;
      margin-right: 170px;
      & /deep/ {
        .el-button--text {
          font-size: 16px;
          padding: 8px 18px;
        }
        .el-button--primary {
          padding: 8px 18px;
          font-size: 16px;
          border-radius: 21px;
        }
      }
    }
    &__right {
      float: right;
      text-align: center;
      padding: 15px 26px;
      & /deep/ {
        .el-button--primary {
          font-size: 16px;
          border-radius: 10px;
          padding: 8px 26px;
          margin-bottom: 24px;
        }
        .el-button--text {
          font-size: 16px;
          padding: 8px 26px;
        }
      }
    }
  }
}
</style>
